<template>
  <!--内容...-->
  <div class="add-card">
    <div class="content" style="margin-top:50px;">
      <div class="add-card-title" style="text-align:center">新增用户</div>
      <div class="contentUp">
        <div class="name">
          <ul>
            <li>
              <b>意向客户：</b
              ><el-input
                v-model="addinvestmentInfo.investmentInfo.agentName"
                placeholder="意向客户"
              ></el-input>
            </li>
            <li>
              <b>联系人：</b
              ><el-input
                v-model="addinvestmentInfo.investmentInfo.contacts"
                placeholder="联系人"
              ></el-input>
            </li>
            <li>
              <b>联系电话：</b
              ><el-input
                v-model="addinvestmentInfo.investmentInfo.contactPhone"
                placeholder="联系电话"
              ></el-input>
            </li>
            <li>
              <b>客户来源：</b>
              <select name="" id="" v-model="addinvestmentInfo.investmentInfo.customerSource">
                <option value="" disabled selected>请选择</option>
                <option
                  v-for="item in investmentInfo_data_from_options"
                  :value="item.key"
                  :key="item.key"
                  >{{ item.value }}
                </option>
              </select>
            </li>
            <li>
              <b>客户进展：</b>
              <select name="" id="" v-model="addinvestmentInfo.investmentInfo.customerProgress">
                <option value="" disabled selected>请选择</option>
                <option
                  v-for="item in investmentInfo_progress_options"
                  :value="item.key"
                  :key="item.key"
                  >{{ item.value }}
                </option>
              </select>
            </li>
            <li>
              <b>客户类型：</b>
              <select name="" id="" v-model="addinvestmentInfo.investmentInfo.customerType">
                <!-- <option value="" disabled selected>请选择</option> -->
                <option
                  v-for="item in investmentInfo_type_options"
                  :value="item.key"
                  :key="item.key"
                  >{{ item.value }}
                </option>
              </select>
            </li>
            <li class="text-input-tit">
              <b>客户备注：</b>
              <textarea
                class="text-input"
                name=""
                id=""
                cols="30"
                rows="10"
                v-model="addinvestmentInfo.investmentInfo.customerRemark"
              ></textarea>
            </li>
          </ul>
          <div class="submit" @click="submitData" :disabled="submitButtonStats">保存</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Cookies from "js-cookie";
import axios from "axios";
import { regionDataPlus } from "element-china-area-data";
import dayjs from "dayjs";
const DEFAULT_DATE = {
  single: dayjs().add(2, "day"),
  multiple: [dayjs(), dayjs().add(2, "day"), dayjs().add(3, "day")],
  during: [dayjs(), dayjs().add(3, "day")]
};
export default {
  name: "AddCustomer",
  components: {},
  data() {
    return {
      //   地区
      options: regionDataPlus,
      selectedOptions: [],
      chinaeduCustomer_option: [],
      chinaeduCustomeValue: "2",
      show: false,
      date: "",
      defaultDate: DEFAULT_DATE.single,
      disabledDate: [dayjs().subtract(2, "day"), dayjs().add(1, "day")],
      investmentTrackingTrackTimes: "",
      investmentInfo_communication_type: [],
      investmentInfo_progress_options: [],
      investmentInfo_type_options: [],
      trackingPeople: Cookies.get("realName"),
      investmentInfo: {},
      investmentInfo_data_from_options: [], //来源
      addTrackingInfo: {
        investmentInfo: {},
        trackingInfo: {}
      },//客户基本信息
      addinvestmentInfo:{
        investmentInfo: {
          // customerSort: "4",
          customerSort: this.$route.query.customerSort,
          belongType: this.$route.query.belongType,
        },
        investmentSignInfo:{}
      },
      submitButtonStats: false,
      
    };
  },
  methods: {
    selectDate(mode) {
      this.show = true;
      this.mode = mode;
      this.defaultDate = DEFAULT_DATE[mode];
      this.investmentInfo.nextTrackingDate = "";
    },
    onChange(date) {
      if (this.mode === "single") {
        this.investmentInfo.nextTrackingDate = date.format("YYYY-MM-DD");
      } else {
        this.investmentInfo.nextTrackingDate = JSON.stringify(
          date.map(item => item.format("YYYY-MM-DD"))
        );
      }
    },
    // 获取下拉
    get_down_list() {
      this.$api.agent.investment_customer_type().then(res => {
        this.chinaeduCustomer_option = res.keyValueList;
      });
      this.$api.agent
        .investmentTrackingTrackTimes({ customerId: this.$route.query.id })
        .then(res => {
          this.investmentTrackingTrackTimes = res.leastTrackTimes;
        });
      this.$api.user
        .optionsList({ codeType: "investment_communication_type" })
        .then(res => {
          this.investmentInfo_communication_type = res.keyValueList;
        });
      this.investmentInfo_progress_options = JSON.parse(
        localStorage.getItem("investmentProgress")
      );
      this.investmentInfo_type_options = JSON.parse(
        localStorage.getItem("investmentType")
      );
      this.$api.agent.investment_customer_from().then(res => {
        this.investmentInfo_data_from_options = res.keyValueList;
      });
    },
    submitData() {
      this.submitButtonStats = true;
      // 网校我的客户新增
      this.$api.agent.investmentInfoAdd(this.addinvestmentInfo).then(res => {
        if(res.result==1){
          this.addinvestmentInfo = {};
          alert(res.msg);
          this.$router.go(-1);
          this.submitButtonStats = false;
        }else{
          this.$message({
              message: res.msg,
              type: "error",
              offset: "40"
            });
          this.submitButtonStats = false;
        }
      });
    }
  },
  mounted() {
    this.get_down_list();
  }
};
</script>

<style scoped lang="scss">
ul {
  li {
    list-style: none;
  }
}
.add-card {
  .content {
    .add-card-title {
      color: #333333;
      font-size: 0.56rem;
      font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
      font-weight: bold;
      text-align: left;
      margin-left: 0.4rem;
      margin-bottom: 0.35rem;
    }
    .contentUp {
      .name {
        width: 9.2rem;
        margin: 0 auto;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px 3px 8px 0px rgba(204, 204, 204, 0.5);
        border-radius: 16px;
        padding-bottom: 0.69rem;
        ul {
          margin: 0 auto;
          padding-left: 0;
          li {
            display: flex;
            flex-direction: row;
            margin-left: 0.53rem;
            margin-right: 0.53rem;
            text-align: left;
            height: 1.06rem;
            line-height: 1.06rem;
            margin-bottom: 0.3rem;
            &.text-input-tit {
              height: 2.41rem;
            }
            i {
              font-style: normal;
              color: #333333;
              font-size: 0.35rem;
            }
            > b {
              color: #999999;
              display: block;
              width: 3rem;
              font-size: 0.35rem;
            }
            .text-input {
              width: 6.4rem;
              height: 2.41rem;
              border: 1px solid #dcdfe6;
              border-radius: 4px;
            }
            .el-input {
              width: 6.4rem;
              height: 1.06rem;
              line-height: 1.06rem;
            }
            input {
              width: 6.4rem;
              height: 1.06rem;
              line-height: 1.06rem;
              border: 1px solid #dcdfe6;
              border-radius: 4px;
            }

            .el-cascader {
              width: 6.4rem;
              height: 1.06rem;
              line-height: 1.06rem;
            }
            select {
              width: 6.4rem;
              font-family: "微软雅黑";
              background: rgba(0, 0, 0, 0);
              width: 249px;
              height: 1.06rem;
              line-height: 1.06rem;
              color: white;
              text-align: center;
              border: 1px solid #dcdfe6;
              color: #333333;
              padding-left: 5px;
            }
            option {
              color: black;
              background: #a6e1ec;
              line-height: 1.06rem;
            }
            select:focus {
              border: 2px #ddd solid;
            }
            option:hover {
              background: #ebccd1;
            }
          }
        }
        .submit {
          width: 8.1rem;
          height: 1.2rem;
          line-height: 1.2rem;
          background: linear-gradient(
            90deg,
            rgba(87, 184, 255, 1) 0%,
            rgba(44, 130, 255, 1) 100%
          );
          border-radius: 0.58rem;
          margin: 0 auto;
          color: #fff;
          text-align: center;
          font-size: 0.48rem;
          margin-top: 0.69rem;
        }
      }
    }
  }
}
</style>
<style lang="scss"></style>
